<template>
  <div class="content">
    <video ref="video" width="1280" height="720" controls></video>
  </div>
</template>

<script setup lang="ts">
import flvjs from "flv.js";
import { ref, onMounted, watch } from "vue";
import { mainStore } from "@/store/main";
const mainState = mainStore();
const video = ref();
let flvPlayer: any;

const rtspToFlv = (rtsp: string) => {
  //   let rtsp = "rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mp4";
  if (flvjs.isSupported()) {
    flvPlayer = flvjs.createPlayer({
      type: "flv",
      url: `ws://localhost:8888/rtsp/?url=${rtsp}`,
    });
    flvPlayer.attachMediaElement(video.value);
    flvPlayer.load();
    setTimeout(() => {
      flvPlayer.play();
    }, 1000);
  }

  // console.log(78, flvPlayer);
};

watch(
  () => mainState.videoState,
  (newVal) => {

    if (newVal) {
      let rtsp =
        // "rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mp4";
      rtspToFlv(mainState.getRtsp.rtsp);
    }else{
        flvPlayer.pause()
        video.value.src=''

    }
  }
);

onMounted(() => {
  //   rtspToFlv();
});
</script>

<style scoped lang="less">
    .content{
        display:flex;
        justify-content: center;
    }
</style>
